<template>
    <!-- 这里的背景色原本是#eeeeee,但是我的电脑显示的很灰就干脆改成白的了 -->
    <div style="min-height: 100vh;">
      <!-- 轮播图区域 :interval="5000" 设置每5秒自动切换-->
        <div class="carousel-container">
            <el-carousel 
                indicator-position="outside" 
                :interval="5000" 
                height="400px" 
                arrow="always"
                style="width: 100%;"
            >
                <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
                  <div class="carousel-bg" :style="{ backgroundImage: `url(${item.img})` }"></div>
                </el-carousel-item>
            </el-carousel>
        </div>
 
        <!-- 新增固定搜索框 -->
        <div class="fixed-search-box">
          <div class="search-content"  style="background: transparent;">
            <div style="text-align: center; color: #fff; font-size: 30px; margin-bottom: 20px;">
              好看、好用、好玩，都在这里
            </div>
            <div style="display: flex">
              <el-input v-model="name" size="medium" prefix-icon="el-icon-search" placeholder="请输入商品名称关键字搜索"></el-input>
              <el-button @click="$router.push({path:'/front/search',query:{name:name}})" size="medium" type="primary" style="margin-left: 5px;background-color: #409EFF;"><i class="el-icon-search"></i></el-button>
            </div>
          </div>
        </div>        
        
      <div style="width: 70%;background-color: #fff;margin: 10px auto;padding: 20px;border-radius: 5px; position: relative;">
  
        <el-button @click="$router.push('/front/addGoods')" style="position: absolute; top: 20px; right: -150px;" size="medium" type="primary" plain>发布商品</el-button>
        <el-button @click="$router.push('/front/userHelp')" style="position: absolute; top: 70px; right: -150px;" size="medium" type="primary" plain>发布求购</el-button>
  
        <div style="margin-bottom: 20px;">
          <el-select v-model="category" size="medium" style="width: 200px;" @change="loadGoods(1)">
            <el-option value="全部"></el-option>
            <el-option v-for="item in categoryList" :key="item.id" :value="item.name"></el-option>
          </el-select>
          <el-select v-model="sort" size="medium" style="width: 200px;margin-left: 10px;" @change="loadGoods(1)">
            <el-option value="最新"></el-option>
            <el-option value="最热"></el-option>
          </el-select>
        </div>
  
        <div>
          <el-row :gutter="15">
            <!-- :span="6" Element 的栅格系统将一行（<el-row>）划分为 24 等份，:span 的数值表示当前列占据的份数 -->
            <!-- 那么24/6=4 表示一行最多放四个这样的列 -->
            <el-col :span="6" v-for="item in goodsList" :key="item.id"> 
              <div style="margin-bottom: 20px;" class="goods-item" @click="$router.push('/front/goodsDetail?id=' + item.id)">
                <img :src="item.img" alt="" style="width: 100%;display: block; height: 260px;margin-bottom: 10px;border-radius: 5px;">
                <div style="font-size: 16px; height: 50px;color: #555;margin-bottom: 10px;" class="line2 goods-name">{{ item.name }}</div><!-- 这里的height设置40不够字会被吞掉 -->
                <div style="display: flex;align-items: baseline;">
                  <!-- strong加粗 这里字体原本是24px-->
                  <strong style="color: red;font-size: 20px;">￥{{ item.price }}</strong>
                  <span style="margin-left: 20px;color: #666;">{{item.readCount}}人浏览</span>
                  <span style="margin-left: 20px;color: #666;">{{ item.likesCount }}人点赞</span>
                </div>
              </div>
            </el-col>
          </el-row>
  
          <div style="margin: 15px 0;">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  export default {
  
    data() {
      return {
        carouselItems: [],//所有的轮播图数据
        categoryList:[],
        goodsList: [],  // 所有的数据
        pageNum: 1,   // 当前的页码
        pageSize: 12,  // 每页显示的个数
        total: 0,
        category:'全部',
        sort:'最新',
        name:''
      }
    },
    mounted() {
      this.loadCategory()
      this.loadBanner()
      this.loadGoods(1)
    },
    // methods：本页面所有的点击事件或者其他函数定义区
    methods: {
      loadCategoryGoods(){
  
      },
      loadBanner(){
        this.$request.get('/banner/selectAll').then(res => {
          this.carouselItems = res.data || []
        })
      },
      //加载分类
      loadCategory(){
        this.$request.get('/category/selectAll').then(res => {
          this.categoryList = res.data || []
        })
      },
      //加载商品
      loadGoods(pageNum) {  // 分页查询
          if (pageNum) this.pageNum = pageNum
          this.$request.get('/goods/selectFrontPage', {
            params: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              category: this.category === '全部' ? null : this.category,
              sort:this.sort
            }
          }).then(res => {
            if (res.code === '200') {
              this.goodsList = res.data?.list
              this.total = res.data?.total
            } else {
              this.$message.error(res.msg)
            }
          })
      },
      handleCurrentChange(pageNum) {
          this.loadGoods(pageNum)
      },
    }
  }
  </script>
  
  <style scoped>
 /* 轮播图容器样式 */
.carousel-container {
  position: relative;
  height: 400px;
}

/* 轮播图背景样式 */
.carousel-bg {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
}

/* 调整elementUI原生样式 */
/deep/ .el-carousel__arrow {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: #333 !important;
}

/deep/ .el-carousel__indicator button {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/deep/ .el-carousel__indicator.is-active button {
  background-color: #409EFF !important;
}

.fixed-search-box {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 精确居中 */
  z-index: 2; /* 确保在轮播图上层 */
  width: 100%; /* 限制最大宽度 */
}

/* 搜索框容器 */
.search-content {
  width: 600px;
  margin: 0 auto; /* 内容居中 */
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);/* 已被行内样式覆盖为transparent  搜索框背景失效*/
  border-radius: 8px;
}
  
  .goods-item{
    cursor: pointer;
  }
  .goods-item img,.goods-name{
    -webkit-transition: all .2s; /* 添加过渡效果 */ /* -webkit-添加兼容性前缀 */
  }
  
  .goods-item:hover img{
    scale: 1.03;
  }
  .goods-item:hover .goods-name{
    color:#ec3d3d !important;
  }
  </style>
  